<template>
  <div class="goods-details">
    <div class="top">
      <p class="title">{{info.goods_name}}</p>
      <div class="cons clear">
        <p class="time">{{info.on_time}}</p>
      </div>
<!--       <div class="head flex" @click="router({path: './lecturerInfo'})">
        <img class="head-img" src="@/assets/jiangshijieshao02.png" alt="">
        <div class="head-name">
          <p class="name">王鹤讲师</p>
          <p class="belong">中国智慧宝资深讲师</p>
        </div>
        <p class="right">讲师详情 <img src="@/assets/querendingdan01.png" alt=""></p>
      </div> -->
    </div>
    <div class="tab-cons">
      <p class="tab-title">课程介绍</p>
      <div class="info" v-html="info.goods_content">
      </div>
    </div>
  </div>
</template>

<script>

  import {makevideodetails} from '@/api/api'

  export default {
    components: {
    },
    data () {
      return {
        info:[],
      }
    },
    created () {
      this.goods_id = this.$route.query.goods_id
      this.detail()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      detail(){
        makevideodetails(this.goods_id, 1).then((res) =>{
          this.info = res.data.data.result[0];
          this.info.goods_content = res.data.data.result[0].goods_content.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.goods-details
  min-height 100vh
  background-color #f5f5f5
  .top
    padding 1.5rem 0 1.5rem 1.5rem
    position relative
    background-color #fff
    margin-bottom 1rem
    .title
      font-size 1.9rem
      color #333
      font-weight bold
      width calc(100% - 10rem)
    .cons
      margin-top 1rem
      padding-bottom 1rem
      border-bottom 1px solid #e6e6e6
      .time
        font-size 1.3rem
        color #ccc
    .head
      display flex
      margin-top 1.5rem
      .head-img
        width 4rem
        height 4rem
        border-radius 50%
        overflow hidden
        margin-right 1rem
        max-width 4rem
      .head-name
        flex 1
        .name
          color #333
          font-weight bold
          font-size 1.3rem
          line-height 2rem
        .belong
          line-height 2rem
          font-size 1.2rem
          color #666
      .right
        line-height 4rem
        padding-right 3rem
        position relative
        img
          position absolute
          right 1.5rem
          width .6rem
          top 1.52rem
  .tab-cons
    .tab-title
      color #333
      font-size 1.6rem
      line-height 5rem
      padding-left 1.6rem
      height 5rem
      background-color #fff 
      font-weight bold
    .info
      text-indent 2em
      padding 0 1.75rem
      padding-top 2.2rem
      background-color #fff
      padding-bottom 2rem
      p
        font-size 1.2rem
        line-height 2.1rem
        color #666
        margin-bottom 2rem
</style>
